<template>
  <div class="recommend">
    <div class="container">
      <!-- 使用v-if解决loop失效的问题，当全部数据加载完毕后，才显示swiper组件 -->
      <swiper
        ref="mySwiper"
        :options="swiperOptions"
        class="swiper-container"
        v-if="banners.length"
      >
        <swiper-slide
          v-for="item in banners"
          :key="item.targerId"
          class="swiper-item"
        >
          <div class="title" :style="{ backgroundColor: item.titleColor }">
            {{ item.typeTitle }}
          </div>
          <img :src="item.imageUrl" :alt="item.typeTitle" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <!-- 推荐歌单 -->
      <Card title="推荐歌单" :dataList="recommendList" isPlayCount="true" :itemWidth="{height: '260px'}"/>
      <!-- 独家放送 -->
      <Card title='独家放送' :dataList="exclusiveList" :itemWidth="{width: '33%', height: '183px'}"/>
      <!-- 推荐mv -->
      <Card title='推荐mv' :dataList="mvList" :itemWidth="{width: '25%', height: '201px'}" isPlayCount="true"/>
    </div>
  </div>
</template>

<script>
import Card from '../../components/Card'
export default {
  name: 'Recommend',
  components: {
    Card
  },
  data () {
    return {
      swiperOptions: {
        // 是否循环
        loop: true,
        // 自动轮播
        autoplay: {
          // 当用户进行操作，不会停止切换
          disableOnInteraction: false
        },
        // 切换图片的方式
        // effect: 'coverflow',
        // 分页器
        pagination: {
          el: '.swiper-pagination',
          // 当小点有很多的时候，分页器小点会部分隐藏。
          dynamicBullets: true,
          // 点击小点时，进行切换
          clickable: true
        }
      },
      banners: [],
      recommendList: [], // 推荐歌单
      exclusiveList: [], // 独家独家放送
      mvList: [] // 推荐mv
    }
  },
  methods: {
    async getInit () {
      // 轮播图的数据
      const bannerData = await this.$http.get('/banner')
      this.banners = bannerData.data.banners
      // 推荐歌单数据
      const recommendData = await this.$http.get('/personalized?limit=10')
      this.recommendList = recommendData.data.result
      // 独家放送
      const exclusiveData = await this.$http.get('/personalized/privatecontent')
      this.exclusiveList = exclusiveData.data.result
      // 推荐mv
      const mvData = await this.$http.get('/personalized/mv')
      this.mvList = mvData.data.result
    }
  },
  created () {
    this.getInit()
  }
}
</script>

<style lang="less" scoped>
.recommend {
  margin-top: 35px;
  // background-color: red;
}

.container {
  width: 1100px;
  margin: 0 auto;
}

.swiper-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  border-radius: 20px;
  margin-bottom: 10px;
  .swiper-item {
    img {
      width: 100%;
    }
    .title {
      position: absolute;
      bottom: 0;
      right: 0;
      color: white;
      padding: 5px 20px;
      border-radius: 10px 0 5px 0;
    }
  }
}
</style>
